<!--
 * @Author: early-autumn
 * @Date: 2020-05-20 19:39:39
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-17 15:37:38
-->
<template>
  <el-dialog
    title="新建临时患者"
    width="680px"
    append-to-body
    :visible="value"
    @close="handleClose"
  >
    <el-form ref="form" label-width="100px" :model="form" :rules="rules" inline>
      <el-row>
        <el-col>
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="手机号：" prop="phoneNumber">
            <el-input
              v-model="form.phoneNumber"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="年龄：" prop="age">
            <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="性别：" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio
                v-for="option in sexOptions"
                :key="option.value"
                :label="option.value"
              >
                {{ option.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { addPerson } from '@/api/services/person'
import { sexOptions } from '@/utils/options'
import { rulesPhone } from '@/utils/regexps'
import { mapState } from 'vuex'

const FORM_DATA = {
  name: undefined,
  phoneNumber: '',
  age: undefined,
  sex: 1,
  isTemporary: 0,
}

export default {
  name: 'CreateTemporaryPatient',
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      // 表单数据
      form: {},
      // 规则
      rules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
        phoneNumber: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: rulesPhone,
            message: '手机号格式不正确',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  computed: {
    sexOptions() {
      return sexOptions
    },
    ...mapState({
      clinicName: (state) => state.clinic.clinicName,
    }),
  },
  watch: {
    value(newVal) {
      if (newVal) {
        this.init()
      } else {
        this.resetForm('form')
      }
    },
  },
  methods: {
    init() {
      this.loading = false
      this.form = { ...FORM_DATA }
    },
    /**
     * 关闭
     */
    handleClose() {
      this.$emit('close', false)
    },
    /**
     * 提交
     */
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        try {
          if (!valid) {
            return
          }
          this.loading = true
          this.form.arriveClinic = this.clinicName
          const { code, data } = await addPerson(this.form)

          if (code === 200) {
            this.handleClose()
            this.$emit('ok', { ...this.form, id: data })
          }
        } finally {
          this.loading = false
        }
      })
    },
  },
}
</script>

<style></style>
